<template>
  <ElementDialog ref="dialog" embed height="80vh" width="80%" show-full-screen :visible="visible" title="选择所属预算">
    <TableView
      ref="tableView"
      :table-attrs="{
        api: fetchList,
        multiple: false,
        selection: true,
        descs: ['create_time'],
        dicOptions: [{ prop: 'type', dicType: 'budget_type' }]
      }"
      form-path="/asset/fyassetbudget/budgetForm/{id:-1}"
      :search-model="searchForm"
      :delete-api="batchDelete"
      :tree-listeners="{ 'node-click': onNodeClick }"
      :tree-attrs="{
        fetchApi: getYearTree,
        show: true,
        treeProps: { label: 'name', value: 'id' },
        lazy: false,
        customRootNode: { name: '全部', id: -1 }
      }"
      :toolbar-attrs="{ buttons: ['slot', { del: false, create: false }] }">
      <template #columns>
        <TableColumn label="所属年度" prop="year" width="80" />
        <TableColumn label="预算序号" prop="number" clickable width="80" />
        <TableColumn label="预算分类" prop="type" clickable width="80" />
        <TableColumn label="开支单位" prop="expenditureFullname" />
        <TableColumn label="执行单位" prop="executionFullname" />
        <TableColumn label="责任人" prop="liableName" width="115" />
        <TableColumn label="预算金额" prop="amount" width="80" />
        <TableColumn label="完成时间" prop="completionDate" width="95" />
        <TableColumn label="限制合同执行" prop="limitThreshold" width="115" align="center">
          <template #default="{ row }">
            <ElTag>{{ row.limitThreshold === '0' ? '否' : '是' }}</ElTag>
          </template>
        </TableColumn>
        <TableColumn label="备注" prop="remarks" />
      </template>
      <template #search-form>
        <FormInput v-model="searchForm.year" label="所属年度" prop="year" />
        <FormInput v-model="searchForm.number" label="预算序号" prop="number" />
        <FormSelect v-model="searchForm.type" dict-type="budget_type" label="预算分类" prop="type" />
        <FormInput v-model="searchForm.expenditureFullname" label="开支单位" prop="expenditureFullname" />
        <FormInput v-model="searchForm.executionFullname" label="执行单位" prop="executionFullname" />
        <FormInput v-model="searchForm.liableName" label="责任人" prop="liableName" />
      </template>
    </TableView>
    <template #footer>
      <ElButton type="primary" @click="onConfirm">确定</ElButton>
    </template>
  </ElementDialog>
</template>

<script>
  import { mapState } from 'vuex'
  import { fetchList, getYearTree, batchDelete } from '@/api/asset/fyassetbudget'

  export default {
    name: 'SelectBudgetTable',
    props: {
      visible: Boolean
    },
    data() {
      return {
        searchForm: {
          year: '',
          number: '',
          type: '',
          expenditureFullname: '',
          executionFullname: '',
          liableName: ''
        }
      }
    },
    computed: {
      ...mapState('user', ['permissions'])
    },
    methods: {
      fetchList,
      batchDelete,
      getYearTree,
      refreshChange() {
        this.$refs.tableView.onSearchClick()
      },
      onNodeClick(node) {},
      onConfirm() {
        const row = this.$refs.tableView.currentRow()
        if (this.$isBlank(row)) {
          this.$message.success('请选择所属预算！')
          return
        }
        this.$emit('confirm', row)
        this.$refs.dialog.hide()
      }
    }
  }
</script>
